<template>
   <div class="carMenu">
    <el-main>
      <div class="demo-input-suffix">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyword" style="width:200px; margin-left: 20px;">
      </el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="getByCarNum">搜索</el-button>
    </div>
    <div>
      <el-table style="width: 100%" :data="carList" @current-change="getCar">
      <el-table-column  type="index" label="序号" width="150">
      </el-table-column>
      <el-table-column prop="createTime" label="注册日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="carNum" label="车牌号" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="t>0" :total="t" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getData" />
    </div>
    </el-main>
    <div>
      <car-edit ref="carEdit" @fatherMethod="getData(1,10)" ></car-edit>
    </div>
  </div>  
</template>
<script>
import Pagination from '@/components/Header/Pagination.vue' // secondary package based on el-pagination
import { mapState } from 'vuex'
import carEdit from './carEdit.vue'
export default {
  components:{
    carEdit,
    Pagination,
    
  },
    name:'CarIndex',
    data() {
      return {
        loading:true,
        currentPage: 1,  // 当前页码-默认首页
        pageSize: 10,  // 每页显示的行数
        keyword:'',//搜索框数据
        carId:0,
        total:1,
      }
    },
  mounted() {
    //组件挂载完成时调用
    this.getData(this.currentPage)
  },
  computed:{
    ...mapState(['carList']),
    t:function(){
      return this.$store.state.t
    }
  },
  methods: {
     //API请求车辆数据
     getData(){
      var data = {};
      data.currentPage = this.currentPage
      data.pageSize = this.pageSize
      this.$store.dispatch('getCarInfo',data)
    },
    //搜索按钮
    getByCarNum(){
      //传递车牌号 + 页码
      const params = {carNum:this.keyword,currentPage:this.currentPage}
      this.$store.dispatch('getCarByCarNum',params)
    },
    getCar(car){
      this.carId = car.carId
      // console.log(this.carId)
    },
    //编辑按钮
    handleEdit(data){
      this.$refs['carEdit'].init(data)
    },
    handleDelete(){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
          type: 'warning'
        }).then(() => {
          this.$notify({
                title: "Success",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
          // 确认后执行删除的操作
          this.$store.dispatch('deleteCar',this.carId)
          //删除数据 再次请求当前页面的数据(刷新数据)
            this.getData(this.currentPage)  
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })       
        })
    }
  }
}
</script>

<style>
  .demo-input-suffix{
    width: 100%;
    float: right; 
  }
  .carMenu{
    margin-left: 250px;
  }
</style>